import React, { useState, useEffect } from 'react';

import { Modal, Form, Alert, Spin } from 'antd';
import LimitInput from '@/components/LimitInput';
import { getTabContainer } from '@/utils/utils';

import DuplicateResumeList from '../containers/DuplicateResumeList';
import './CommentModal.less';
import { checkResumeDuplicate } from '../service';

const FORM_DEFAULT_LAYOUT = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 16
    }
};
const CommentModal = ({
    resumeId,
    flag,
    form,
    rows = 4,
    onOk,
    onCancel,
    operate,
    commentLabel = '理由',
    width = 640,
    destroyOnClose = true,
    title,
    visible,
    ...res
}) => {
    const { getFieldDecorator, validateFields } = form;
    const [confirmLoading, setConfirmLoading] = useState(true);
    const [alertMsg, setAlertMsg] = useState(''); // Alert 显示的信息
    const [showAlert, setShowAlert] = useState(false); // Alert 显示状态，默认不显示，走查重逻辑后再设置显示状态
    const [modalTitle, setModalTitle] = useState(''); // 弹窗标题，用于需要查重的场景。
    useEffect(() => {
        if (title !== modalTitle) setModalTitle(title);
    }, [title]);
    const [showDuplicate, setShowDuplicate] = useState(false); // 是否显示查重结果
    const [duplicateArr, setDuplicateArr] = useState([]); // 查重结果数组
    const [checkingDuplicate, setCheckingDuplicate] = useState(false); // 正在查重

    /**
     * 简历查重，传resumeId
     */
    const checkDuplicate = async () => {
        setCheckingDuplicate(true);
        const { code, data = [] } = await checkResumeDuplicate({ resumeId });
        if (code !== 10000) {
            console.log('推荐时简历查重失败');
        } else {
            if (data.length === 0) {
                // 无重复的情况
                setAlertMsg(flag.type); // Alert信息设置为父组件传来的
                setShowAlert(flag.status === 1); // Alert显示状态由父组件控制
            } else {
                // 出现重复
                setAlertMsg('此简历正在应聘其他岗位，请查看进度信息。确定继续推荐？');
                setShowAlert(true);
                setShowDuplicate(true);
                setDuplicateArr(data);
            }
            setConfirmLoading(false);
        }
        setCheckingDuplicate(false);
    };

    /**
     * 在弹窗显示、关闭的时候，重置对应状态
     */
    const resetModalState = () => {
        if (visible && operate !== 'like') {
            setConfirmLoading(false);
            setAlertMsg(flag.type); // Alert信息设置为父组件传来的
            setShowAlert(flag.status === 1); // Alert显示状态由父组件控制
        } else {
            // 关闭时
            setConfirmLoading(true);
            setShowDuplicate(false);
            setShowAlert(false);
            setCheckingDuplicate(false);
        }
    };

    useEffect(() => {
        if (visible && operate === 'like') {
            checkDuplicate();
        } else {
            resetModalState();
        }
    }, [visible, operate]);

    const handleOk = () => {
        setConfirmLoading(true);
        validateFields(async (err, values) => {
            if (err) {
                setConfirmLoading(false);
                return;
            }
            const { comment } = values;
            if (onOk) {
                await onOk(comment);
            }
            setConfirmLoading(false);
        });
    };
    return (
        <Modal
            okText="确定"
            wrapClassName="modalContainer"
            title={modalTitle}
            {...res}
            visible={visible}
            width={width}
            onOk={handleOk}
            onCancel={onCancel}
            confirmLoading={confirmLoading}
            destroyOnClose={destroyOnClose}
            getContainer={() => getTabContainer()}
        >
            <Spin spinning={checkingDuplicate}>
                {checkingDuplicate ? <div style={{ height: 64 }}></div> : null}
                {showAlert ? (
                    <Alert message={alertMsg} style={{ marginBottom: '24px' }} type="warning" showIcon banner />
                ) : null}
                {showDuplicate ? <DuplicateResumeList duplicateArr={duplicateArr} closeModal={onCancel} /> : null}
            </Spin>
            <Form {...FORM_DEFAULT_LAYOUT} className="formContainer">
                <Form.Item label="理由">
                    {getFieldDecorator('comment', {
                        rules: [
                            {
                                required: true,
                                message: `请输入${commentLabel}`
                            }
                        ]
                    })(<LimitInput rows={rows} area maxLength={500} autoSize={{ minRows: 3, maxRows: 6 }} />)}
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default Form.create()(CommentModal);
